<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
      <style>
          
     .box{
         position: relative;
          width: 400px;
          height: 300px;
          background-color: lightblue;
          margin: 100px auto;
     }
     .box1{
         position: absolute;
            left: 150px;
            top: 100px;
            width: 50px;
            height: 50px;
            background-color:white;
            border-radius: 50px 50px 50px 50px;
            

     }
     .box2{
         position: absolute;
            
            left: 123px;
            top: 72px;
            width: 100px;
            height: 100px;
           border: 2px solid white;
            border-radius: 50px 50px 50px 50px;
            

     }

     .box3{
         position: absolute;
            left: 210px;
            top: 100px;
            width: 30px;
            height: 30px;
            background-color: white;
            border-radius: 50px 50px 50px 50px;
            

     }
    





      </style>



</head>
<body>
      <div class="box">
          <div class="box1"></div>
                 <div class="box2"></div>
                 <div class="box3"></div>
                 
          </div>

      </div>




</body>
</html>